<script>
import Header from '@/views/Components/Header/header.vue';
import Header1 from "@/views/Components/Header/header1.vue";
import Footer from "@/views/Components/Footer/footer.vue";
import {getCommodityInfo} from "@/api/detail/DetailService";
import LoadingVue from '@/views/Components/Others/loading.vue';
import {addCart, addFavorite} from "@/api/shopCar/cart";
import {getCommoditiesByCategoryId} from "@/api/home/HomeService";
export default {
    components: {
        Header,
        Header1,
        Footer,
        LoadingVue
    },
    data() {
        return {
            ShowImg: require("@/assets/images/items/p1.png"),
            length: 40,
            ImgList: [],
            ColorList: [
                {
                    class: "d1",
                    color: "砚黑",
                    src: require("@/assets/images/items/p7.png")
                },
                {
                    class: "",
                    color: "纯白",
                    src: require("@/assets/images/items/p8.png")
                }
            ],
            ColorList7: [
                {
                    class: "d1",
                    color: "外漆（鎏金黑） 内饰（琥珀棕）",
                },
                {
                    class: "",
                    color: "外漆（深空灰）内饰（韶华杏）",
                },
                {
                    class: "",
                    color: "外漆（天青蓝）内饰（赤茶橘）",
                },
                {
                    class: "",
                    color: "外漆（冰晶银）内饰（赤茶橘）",
                },
                {
                    class: "",
                    color: "外漆（星际蓝）内饰（琥珀棕）",
                }
            ],
            VersionList: [
                {
                    class: "d1",
                    version: "16GB+1TB"
                },
                {
                    class: "",
                    version: "16GB+512GB"
                },
                {
                    class: "",
                    version: "32GB+1TB"
                },
            ],
            VersionList7: [
                {
                    class: "d1",
                    version: "问界 新M7 Ultra六座后驱智驾版"
                },
                {
                    class: "",
                    version: "问界 新M7 Ultra六座四驱智驾版"
                },
                {
                    class: "",
                    version: "问界 新M7 Ultra五座后驱智驾版"
                },
                {
                    class: "",
                    version: "问界 新M7 Ultra五座四驱智驾版"
                }
            ],
            BuyList: [
                {
                    class: "d1",
                    buy: "全款购买"
                },
                {
                    class: "",
                    buy: "分期购买"
                }
            ],
            ShopId: "",
            version: "16GB + 1TB",
            color: "炫白",
            buy: "全款购买",
            ShopInfo: [],
            nums: 1,
            flag: false,
            typeId: 0
        };
    },
    computed: {},
    watch: {},
    methods: {
        // 初始化商品数据
        async InitShopItem() {
            let result = await getCommodityInfo(this.ShopId);
            let res = await getCommoditiesByCategoryId(this.typeId);
            let imgList = [];
            for(let i = res.data.length - 1 ; i >= 3; i --) {
                imgList.push(res.data[i].cover);
            }
            this.ImgList = imgList;
            this.ShopInfo = result.data;
            this.ShowImg = this.ShopInfo.cover;

            setTimeout(options => {
                this.$loading(options).close();
            }, 500)
        },
        changeSrc(src, index) {
            this.ShowImg = src;
            this.length = 40 + index * 100;
        },
        // 清空颜色选中值
        clearColors() {
            if(this.typeId !== 31) {
                this.ColorList.forEach(color => {
                    color.class = "";
                })
            } else {
                this.ColorList7.forEach(color => {
                    color.class = "";
                })
            }
        },
        // 清空版本选中值
        clearVersions() {
            if(this.typeId !== 31) {
                this.VersionList.forEach(version => {
                    version.class = "";
                })
            } else {
                this.VersionList7.forEach(version => {
                    version.class = "";
                })
            }
        },
        // 清空购买方式选中值
        clearBuy() {
            this.BuyList.forEach(buy => {
                buy.class = "";
            })
        },
        // 改变购买方式选中值
        changeBuy(index) {
            this.clearBuy();
            this.BuyList[index].class = "d1";
            this.buy = this.BuyList[index].buy;
        },
        // 改变版本选中值
        changeVersion(index) {
            this.clearVersions();
            if(this.typeId !== 31) {
                this.VersionList[index].class = "d1";
                this.version = this.VersionList[index].version;
            } else {
                this.VersionList7[index].class = "d1";
                this.version = this.VersionList7[index].version;
            }
        },
        // 改变颜色选中值
        changeColor(index) {
            this.clearColors();
            if(this.typeId !== 31) {
                this.ColorList[index].class = "d1";
                this.color = this.ColorList[index].color;
            } else {
                this.ColorList7[index].class = "d1";
                this.color = this.ColorList7[index].color;
            }
        },
        /**
         * 添加购物车
         * @constructor
         */
        async AddCart() {
            let result = await addCart(this.ShopId, this.nums);
            if(result.code === 200) {
                this.$message({
                    message: "添加购物车成功",
                    type: "success"
                });
            } else {
                this.$message({
                    message: result.message,
                    type: "error"
                })
            }
        },
        /**
         * 添加收藏
         */
        async AddFavorite() {
            let result = await addFavorite(this.ShopId);
            if(result.code === 200) {
                this.$message({
                    message: "添加收藏成功!",
                    type: "success"
                })
            } else {
                this.$message({
                    message: result.message,
                    type: "error"
                })
            }
        }
    },
    created() {
        this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.99)"
        });
        this.ShopId = this.$route.query.id;
        this.typeId = this.$route.query.type
        this.InitShopItem();
    },
    mounted() {

    },
}
</script>

<template>
    <div id="AppDetail">
        <Header></Header>
        <Header1></Header1>
<!--        <LoadingVue v-if="flag"></LoadingVue>-->
        <div class="contain">
            <div class="contain_top">
                <a href="#">首页</a>
                <div class="fuhao">></div>
                <div class="info">{{ ShopInfo.name }} 16GB + 1TB 炫白</div>
            </div>
            <div class="contain_body">
                <div class="c_b_left">
                    <div class="c_b_l_t">
                        <div id="small">
                            <img :src="ShowImg" alt="">
                            <div id="shadow"></div>
                            <div id="cover"></div>
                        </div>
                        <div id="big">
                            <img :src="ShowImg" />
                        </div>
                    </div>
                    <div class="c_b_l_b">
                        <svg viewBox="0 0 1024 1024" stroke="" role="img" class="r-f4l7vg"
                            style="height: 28px; margin-left: 6px; width: 28px;">
                            <g>
                                <path
                                    d="M330.741 777.278l-1.368-1.291-211.189-211.189c-28.552-28.552-29.146-74.473-1.784-103.749l1.784-1.846 211.189-211.189c5.499-5.499 12.5-8.578 19.683-9.238l1.962-0.12h1.965c7.859 0.24 15.646 3.359 21.645 9.358 12.050 12.050 12.481 31.321 1.291 43.887l-1.291 1.368-196.104 196.104c-12.050 12.050-12.481 31.321-1.291 43.887l1.291 1.368 196.104 196.104c12.497 12.497 12.497 32.758 0 45.255-6.025 6.025-13.855 9.145-21.75 9.361l-1.974-0.007c-7.236-0.247-14.403-2.934-20.163-8.063z"
                                    fill-rule="evenodd" fill="currentColor" stroke=""></path>
                            </g>
                        </svg>
                        <div class="items">
                            <div class="red_line" :style="{ left: length + 'px' }"></div>
                            <img v-for="(img, index) in ImgList" :key="index" :src="img" alt=""
                                @mouseover="changeSrc(img, index)">
                        </div>
                        <svg viewBox="0 0 1024 1024" stroke="" role="img" class="r-f4l7vg r-19u6a5r"
                            style="height: 28px; width: 28px;">
                            <g>
                                <path
                                    d="M181.259 246.722l1.368 1.291 211.189 211.189c28.552 28.552 29.146 74.473 1.784 103.749l-1.784 1.846-211.189 211.189c-5.499 5.499-12.5 8.578-19.683 9.238l-1.962 0.12h-1.965c-7.859-0.24-15.646-3.359-21.645-9.358-12.050-12.050-12.481-31.321-1.291-43.887l1.291-1.368 196.104-196.104c12.050-12.050 12.481-31.321 1.291-43.887l-1.291-1.368-196.104-196.104c-12.497-12.497-12.497-32.758 0-45.255 6.025-6.025 13.855-9.145 21.75-9.361l1.974 0.007c7.236 0.247 14.403 2.934 20.163 8.063z"
                                    fill-rule="evenodd" fill="currentColor" stroke=""></path>
                            </g>
                        </svg>
                    </div>
                </div>
                <div class="c_b_right">
                    <div class="c_name">
                        {{ ShopInfo.name }} {{ version }} {{ color }}
                    </div>
                    <div class="c_info">
                        <span class="s1">①整点下单前30件赠价值299元华为氮化镓超薄充电器（Max 66W）颜色随机 ，限10点/16点/20点，查看活动详情
                            ②12期0分期利息，月付低至750元>></span>
                        <span class="s2">双卫星通信，超可靠玄武架构，全焦段超清影像，静谧通话</span>
                    </div>
                    <div class="c_price">
                        <span class="s1">￥</span>
                        <span class="s2">{{ ShopInfo.price }}</span>
                    </div>
                    <div class="c_huabei">
                        <span class="s1">花呗/掌上生活分期直购，最高可享</span>
                        <span class="s2">12期</span>
                        <span class="s3">0分期利息</span>
                        <svg width="20" height="20" viewBox="0 0 1024 1024" stroke="" role="img"
                            class="r-xvpbdx r-1472mwg r-lrsllp">
                            <g>
                                <path
                                    d="M181.259 246.722l1.368 1.291 211.189 211.189c28.552 28.552 29.146 74.473 1.784 103.749l-1.784 1.846-211.189 211.189c-5.499 5.499-12.5 8.578-19.683 9.238l-1.962 0.12h-1.965c-7.859-0.24-15.646-3.359-21.645-9.358-12.050-12.050-12.481-31.321-1.291-43.887l1.291-1.368 196.104-196.104c12.050-12.050 12.481-31.321 1.291-43.887l-1.291-1.368-196.104-196.104c-12.497-12.497-12.497-32.758 0-45.255 6.025-6.025 13.855-9.145 21.75-9.361l1.974 0.007c7.236 0.247 14.403 2.934 20.163 8.063z"
                                    fill-rule="evenodd" fill="#999999" stroke=""></path>
                            </g>
                        </svg>
                    </div>
                    <div class="c_youhui">
                        <span class="s1">以旧换新补贴</span>
                        <span class="s1">整点限量赠</span>
                        <span class="s1">支付成功赠券</span>
                        <span class="s1">赠送积分</span>
                        <span class="s1">0分期免息</span>
                        <span class="s2">
                            优惠
                            <svg width="20" height="20" viewBox="0 0 1024 1024" stroke="" role="img"
                                class="r-xvpbdx r-1472mwg r-lrsllp">
                                <g>
                                    <path
                                        d="M181.259 246.722l1.368 1.291 211.189 211.189c28.552 28.552 29.146 74.473 1.784 103.749l-1.784 1.846-211.189 211.189c-5.499 5.499-12.5 8.578-19.683 9.238l-1.962 0.12h-1.965c-7.859-0.24-15.646-3.359-21.645-9.358-12.050-12.050-12.481-31.321-1.291-43.887l1.291-1.368 196.104-196.104c12.050-12.050 12.481-31.321 1.291-43.887l-1.291-1.368-196.104-196.104c-12.497-12.497-12.497-32.758 0-45.255 6.025-6.025 13.855-9.145 21.75-9.361l1.974 0.007c7.236 0.247 14.403 2.934 20.163 8.063z"
                                        fill-rule="evenodd" fill="#999999" stroke=""></path>
                                </g>
                            </svg>
                        </span>
                    </div>
                    <div class="c_type">
                        <div class="typeTop">颜色</div>
                        <div v-if="typeId !== 31" class="type" :style="{ gridTemplateRows: `repeat(${(ColorList.length + 1) / 2} , 40px)` }">
                            <div :class="color.class" v-for="(color, index) in ColorList" :key="index"
                                @click="changeColor(index)">
                                <img v-if="typeId === 18" width="30" height="30" :src="color.src" alt="">
                                {{ color.color }}
                            </div>
                        </div>
                        <div v-else class="type" :style="{ gridTemplateRows: `repeat(${(ColorList7.length + 1) / 2} , 40px)` }">
                            <div :class="color.class" v-for="(color, index) in ColorList7" :key="index"
                                 @click="changeColor(index)">
<!--                                <img v-if="typeId === 18" width="30" height="30" :src="color.src" alt="">-->
                                {{ color.color }}
                            </div>
                        </div>
                    </div>
                    <div class="c_version">
                        <div class="versionTop">版本</div>
                        <div v-if="typeId !== 31" class="version"
                            :style="{ gridTemplateRows: `repeat(${(VersionList.length + 1) / 2} , 40px)` }">
                            <div :class="version.class" v-for="(version, index) in VersionList" :key="index"
                                @click="changeVersion(index)">
                                {{ version.version }}
                            </div>
                        </div>
                        <div v-else class="version"
                             :style="{ gridTemplateRows: `repeat(${(VersionList7.length + 1) / 2} , 40px)` }">
                            <div :class="version.class" v-for="(version, index) in VersionList7" :key="index"
                                 @click="changeVersion(index)">
                                {{ version.version }}
                            </div>
                        </div>
                    </div>
                    <div class="c_sales">
                        <div class="salesTop">销售类型</div>
                        <div class="sales" :style="{ gridTemplateRows: `repeat(${(BuyList.length + 1) / 2} , 40px)` }">
                            <div :class="buy.class" v-for="(buy, index) in BuyList" :key="index"
                                @click="changeBuy(index)">{{ buy.buy }}</div>
                        </div>
                    </div>
                    <div class="c_buy">
                        <div class="buyAddress">
                            <div class="addressTop">发货</div>
                            <div class="content">
                                <span>预计付款后28天内完成发货</span>
                                <svg width="15" height="15" viewBox="0 0 1024 1024" stroke="" role="img"
                                    class="r-xvpbdx r-10ptun7 r-1janqcz">
                                    <g>
                                        <path
                                            d="M512 42.667c259.206 0 469.333 210.128 469.333 469.333s-210.128 469.333-469.333 469.333c-259.206 0-469.333-210.128-469.333-469.333s210.128-469.333 469.333-469.333zM512 106.667c-223.859 0-405.333 181.474-405.333 405.333s181.474 405.333 405.333 405.333c223.859 0 405.333-181.474 405.333-405.333s-181.474-405.333-405.333-405.333zM512 416c17.673 0 32 14.327 32 32v288c0 17.673-14.327 32-32 32s-32-14.327-32-32v-288c0-17.673 14.327-32 32-32zM512 256c29.453 0 53.333 23.88 53.333 53.333s-23.88 53.333-53.333 53.333c-29.453 0-53.333-23.88-53.333-53.333s23.88-53.333 53.333-53.333z"
                                            fill-rule="evenodd" fill="#aeaeae" stroke=""></path>
                                    </g>
                                </svg>
                            </div>
                        </div>
                        <div class="b_cycle">
                            <div class="cycleTop">
                                <div class="top">回收</div>
                                <div class="content">
                                    <span class="s1">高价回收</span>
                                    <span class="s2">高价回收送多重购新补贴</span>
                                    <span class="s3">
                                        <svg width="15" height="15" viewBox="0 0 1024 1024" stroke="" role="img"
                                            class="r-v374zm r-10ptun7 r-1janqcz">
                                            <g>
                                                <path
                                                    d="M757.77 471.894c20.793 20.999 23.103 53.597 6.931 77.173l-6.931 8.378-343.029 346.436c-23.392 23.624-61.318 23.624-84.71 0-20.793-20.999-23.103-53.597-6.931-77.173l6.931-8.378 300.7-303.687-305.986-308.973c-20.793-20.999-23.103-53.597-6.931-77.173l6.931-8.378c20.793-20.999 53.070-23.333 76.414-7l8.296 7 348.316 351.775z"
                                                    fill-rule="evenodd" fill="currentColor" stroke=""></path>
                                            </g>
                                        </svg>
                                    </span>
                                </div>
                                <div class="test">
                                    <span class="s1">
                                        <svg width="15" height="15" viewBox="0 0 1024 1024" stroke="" role="img"
                                            class="r-v374zm r-10ptun7 r-1janqcz">
                                            <g>
                                                <path
                                                    d="M512 42.667c259.206 0 469.333 210.128 469.333 469.333s-210.128 469.333-469.333 469.333c-259.206 0-469.333-210.128-469.333-469.333s210.128-469.333 469.333-469.333zM512 106.667c-223.859 0-405.333 181.474-405.333 405.333s181.474 405.333 405.333 405.333c223.859 0 405.333-181.474 405.333-405.333s-181.474-405.333-405.333-405.333zM775.987 372.039c12.050 12.050 12.481 31.321 1.291 43.887l-1.291 1.368-253.856 253.856c-28.552 28.552-74.473 29.146-103.749 1.784l-1.846-1.784-147.189-147.189c-4.544-4.544-7.436-10.115-8.675-15.966l-0.62-4.429v-4.464c0.516-7.43 3.615-14.715 9.295-20.395 12.050-12.050 31.321-12.481 43.887-1.291l1.368 1.291 132.104 132.104c12.050 12.050 31.321 12.481 43.887 1.291l1.368-1.291 238.771-238.771c12.497-12.497 32.758-12.497 45.255 0z"
                                                    fill-rule="evenodd" fill="#d5d5d5" stroke=""></path>
                                            </g>
                                        </svg>
                                    </span>
                                    <span class="s2">满48元包邮</span>
                                    <span class="s1">
                                        <svg width="15" height="15" viewBox="0 0 1024 1024" stroke="" role="img"
                                            class="r-v374zm r-10ptun7 r-1janqcz">
                                            <g>
                                                <path
                                                    d="M512 42.667c259.206 0 469.333 210.128 469.333 469.333s-210.128 469.333-469.333 469.333c-259.206 0-469.333-210.128-469.333-469.333s210.128-469.333 469.333-469.333zM512 106.667c-223.859 0-405.333 181.474-405.333 405.333s181.474 405.333 405.333 405.333c223.859 0 405.333-181.474 405.333-405.333s-181.474-405.333-405.333-405.333zM775.987 372.039c12.050 12.050 12.481 31.321 1.291 43.887l-1.291 1.368-253.856 253.856c-28.552 28.552-74.473 29.146-103.749 1.784l-1.846-1.784-147.189-147.189c-4.544-4.544-7.436-10.115-8.675-15.966l-0.62-4.429v-4.464c0.516-7.43 3.615-14.715 9.295-20.395 12.050-12.050 31.321-12.481 43.887-1.291l1.368 1.291 132.104 132.104c12.050 12.050 31.321 12.481 43.887 1.291l1.368-1.291 238.771-238.771c12.497-12.497 32.758-12.497 45.255 0z"
                                                    fill-rule="evenodd" fill="#d5d5d5" stroke=""></path>
                                            </g>
                                        </svg>
                                    </span>
                                    <span class="s3">由华为终端提供商品、发货开票及售后服务</span>
                                    <span class="s4">
                                        <svg width="15" height="15" viewBox="0 0 1024 1024" stroke="" role="img"
                                            class="r-v374zm r-10ptun7 r-1janqcz">
                                            <g>
                                                <path
                                                    d="M757.77 471.894c20.793 20.999 23.103 53.597 6.931 77.173l-6.931 8.378-343.029 346.436c-23.392 23.624-61.318 23.624-84.71 0-20.793-20.999-23.103-53.597-6.931-77.173l6.931-8.378 300.7-303.687-305.986-308.973c-20.793-20.999-23.103-53.597-6.931-77.173l6.931-8.378c20.793-20.999 53.070-23.333 76.414-7l8.296 7 348.316 351.775z"
                                                    fill-rule="evenodd" fill="currentColor" stroke=""></path>
                                            </g>
                                        </svg>
                                    </span>
                                </div>
                                <div class="price">
                                    <div class="priceTop">
                                        <span class="s1">￥</span>
                                        <span class="s2">{{ ShopInfo.price * nums}}</span>
                                    </div>
                                    <div class="content">
                                        <span>已选:&nbsp;&nbsp;&nbsp;{{ ShopInfo.name }} {{ version }} {{ color }} {{ buy }}</span>
                                        <span class="txt"></span>
                                    </div>
                                </div>
                                <div class="nums">
                                    <div class="Lnums">
                                        <el-input-number v-model="nums" :min="1" :max="100" label="描述文字"></el-input-number>
                                        <div class="storeNums">库存：{{ ShopInfo.storeNum }}</div>
                                        <div class="CollectBox" style="display: flex; justify-content: center;align-items: center; gap: 20px; font-weight: 800;">
                                            <img @click="AddFavorite" src="@/assets/icons/collect.png" width="30" height="30" alt="" style="cursor: pointer">
                                            收藏
                                        </div>
                                    </div>
                                    <div class="Rnums">
                                        <button @click="AddCart">加入购物车</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Footer PTop1="0" PTop2="50px"></Footer>
    </div>
</template>


<style lang='scss'>
@import url(../../../assets/css/detail.css);
</style>
